<template>
  <el-form :model="user" :rules="rules" ref="userform" label-width="100px" v-loading="loading">
    <el-form-item label="登陆帐号" prop="userName">
      <el-input v-model="user.userName"></el-input>
    </el-form-item>
    <el-form-item label="登陆密码" prop="password">
      <el-input v-model="user.password" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="确认密码" prop="password2">
      <el-input v-model="user.password2" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="姓名" prop="name">
      <el-input v-model="user.name"></el-input>
    </el-form-item>
    <el-form-item label="手机号" prop="phoneNumber">
      <el-input v-model="user.phoneNumber"></el-input>
    </el-form-item>
    <el-form-item label="开户银行" prop="bank">
      <el-input v-model="user.bank"></el-input>
    </el-form-item>
    <el-form-item label="银行卡号" prop="bankCardNumber">
      <el-input v-model="user.bankCardNumber"></el-input>
    </el-form-item>
    <el-form-item label="身份证号" prop="identityCard">
      <el-input v-model="user.identityCard"></el-input>
    </el-form-item>
    <el-form-item label="联系地址" prop="address">
      <el-input v-model="user.address"></el-input>
    </el-form-item>
    <fieldset v-if="accountType == 1">
      <legend>订单信息</legend>
      <el-form-item label="收件人" prop="order.consignee">
        <el-input v-model="user.order.consignee"></el-input>
      </el-form-item>
      <el-form-item label="联系电话" prop="order.consigneeTel">
        <el-input v-model="user.order.consigneeTel"></el-input>
      </el-form-item>
      <el-form-item label="收件地址" prop="order.consigneeAddress">
        <el-input v-model="user.order.consigneeAddress"></el-input>
      </el-form-item>
    </fieldset>
    <el-form-item>
      <el-button round type="primary" @click="onSubmit">提交注册</el-button>
      <el-button round @click="resrtFrom">重置</el-button>
      <el-button round @click="onsetTestInfo">预置注册信息</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { mapGetters } from 'vuex'
import { CreateUser, CreateAdmin, ValidateIdcard } from '@/api/user'

export default {
  name: 'editUser',
  props: {
    currentNetPointId: {
      type: Number,
      default: 0
    },
    accountType: {
      type: Number,
      default: 1
    }
  },
  components: {},
  data() {
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.user.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      user: {
        userName: '',
        password: '',
        password2: '',
        name: '',
        phoneNumber: '',
        emailAddress: '',
        identityCard: '',
        address: '',
        bank: '',
        bankCardNumber: '',
        accountType: 1,
        currentNetPointId: 0,
        order: {
          consignee: '',
          consigneeTel: '',
          consigneeAddress: ''
        }
      },
      loading: false,
      rules: {
        userName: [
          { required: true, message: '请输入登陆帐号', trigger: 'blur' },
          { min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur' }
        ],
        password2: [{ validator: validatePass2, trigger: 'blur' }],
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 1, max: 16, message: '长度在 1 到 16 个字符', trigger: 'blur' }
        ],
        phoneNumber: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
            pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
            message: '请输入正确的手机号',
            trigger: 'blur'
          }
        ],
        /*
        emailAddress: [
          { required: true, message: '请输入电子邮箱', trigger: 'blur' },
          {
            pattern: /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/,
            message: '请输入正确的电子邮箱',
            trigger: 'blur'
          }
        ],
        bank: [{ required: true, message: '请输入开户银行', trigger: 'blur' }],
        bankCardNumber: [
          { required: true, message: '请输入银行卡号', trigger: 'blur' }
        ],
        */
        identityCard: [
          { required: true, message: '请输入正确的身份证号', trigger: 'blur' },
          { validator: ValidateIdcard, trigger: 'blur' }
        ],
        'order.consignee': [
          { required: true, message: '请输入收件人', trigger: 'blur' }
        ],
        'order.consigneeTel': [
          { required: true, message: '请输入联系电话', trigger: 'blur' }
        ],
        'order.consigneeAddress': [
          { required: true, message: '请输入收件地址', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['roles']),
    isAdmin() {
      return this.roles.includes('ADMIN')
    }
  },
  watch: {
    currentNetPointId: {
      immediate: true,
      handler(newVal) {
        this.user.currentNetPointId = newVal
      }
    },
    accountType: {
      immediate: true,
      handler(newVal) {
        this.user.accountType = newVal
      }
    }
  },
  created() {},
  methods: {
    onSubmit() {
      var _this = this
      _this.$refs.userform.validate(valid => {
        if (valid) {
          _this.loading = true
          var createFun = _this.isAdmin ? CreateAdmin : CreateUser
          createFun(_this.user)
            .then(result => {
              _this.$message.success('创建成功')
              _this.$emit('createSuccessed', result)
              _this.loading = false
            })
            .catch(response => {
              _this.loading = false
            })
        }
      })
    },
    resrtFrom() {
      this.$refs['userform'].resetFields()
    },
    mathRandNumber(length) {
      var Num = ''
      for (var i = 0; i < length; i++) {
        Num += Math.floor(Math.random() * 10)
      }
      return Num
    },
    getId_no() {
      var coefficientArray = [
        '7',
        '9',
        '10',
        '5',
        '8',
        '4',
        '2',
        '1',
        '6',
        '3',
        '7',
        '9',
        '10',
        '5',
        '8',
        '4',
        '2'
      ] // 加权因子
      var lastNumberArray = [
        '1',
        '0',
        'X',
        '9',
        '8',
        '7',
        '6',
        '5',
        '4',
        '3',
        '2'
      ] // 校验码
      var address = '420101' // 住址
      var birthday = '19810101' // 生日
      var s =
        Math.floor(Math.random() * 10).toString() +
        Math.floor(Math.random() * 10).toString() +
        Math.floor(Math.random() * 10).toString()
      var array = (address + birthday + s).split('')
      var total = 0
      for (var i in array) {
        total = total + parseInt(array[i]) * parseInt(coefficientArray[i])
      }
      var lastNumber = lastNumberArray[parseInt(total % 11)]
      var id_no_String = address + birthday + s + lastNumber
      return id_no_String
    },
    randName() {
      var zm = 'abcdefghijklmnopqrstuvwxyz'
      var name = ''
      for (var i = 0; i < 4; i++) {
        name += zm[Math.ceil(Math.random() * 25)]
      }
      return name
    },
    onsetTestInfo() {
      var lt = this.randName()
      this.user.userName = lt
      this.user.password = lt
      this.user.password2 = lt
      this.user.name = `姓${lt}名`
      this.user.phoneNumber = `15${this.mathRandNumber(9)}`
      this.user.emailAddress = `${lt}@qq.com`
      this.user.identityCard = this.getId_no()
      this.user.address = `${lt}家庭地址`
      this.user.bank = `招商银行`
      this.user.bankCardNumber = this.mathRandNumber(16)
      this.user.order.consignee = lt
      this.user.order.consigneeTel = this.user.phoneNumber
      this.user.order.consigneeAddress = `${lt}收货地址`
    }
  }
}
</script>
